<template>
 <div class="wrapper loginsign"> 
   <div class="item signup"> 
    <div class="form"> 
     <h3 class="loginsign-title">注册新账号</h3> 
     <form class="sui-form"> 
      <div class="control-group"> 
       <label for="inputname" class="control-label">名字</label> 
       <div class="controls"> 
        <input type="text" id="inputname" v-model="user.username" placeholder="真实姓名或常用昵称" class="input-xlarge" /> 
       </div> 
      </div> 
      <div class="different"> 
       <div class="radio-content"> 
        <div id="a1" class="phone"> 
         <div class="control-group number"> 
          <input type="text" placeholder="仅支持大陆手机号" v-model="user.mobile" class="input-xlarge" /> 
         </div> 
         <div class="control-group code"> 
          <div class="input-append"> 
           <input id="appendedInputButton"  v-model="code"  type="text" placeholder="短信验证" class="span2 input-large msg-input" /> 
           <button type="button" @click="sendSms" class="sui-btn msg-btn">获取验证码</button> 
          </div> 
         </div> 
         <div class="control-group"> 
          <label for="inputpassword" class="control-label">密码</label> 
          <div class="controls"> 
           <input type="text" v-model="user.password" id="inputpassword" placeholder="请输入6-16位密码" class="input-xlarge" /> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="control-group btn-signup"> 
       <label class="control-label"></label> 
       <div class="controls"> 
        <label> <input type="checkbox" /><span class="type-text" style="font-size:12px;">同意协议并接受《服务条款》</span> </label> 
        <button type="button" @click="register" class="sui-btn btn-danger btn-yes">注 册</button> 
       </div> 
      </div> 
     </form> 
    </div> 
   </div> 
   <div class="item"> 
    <div class="form"> 
     <h3 class="loginsign-title">用户登录</h3> 
     <form class="sui-form login-form"> 
      <div class="control-group"> 
       <label for="inputname" class="control-label">手机号：</label> 
       <div class="controls"> 
        <input type="text" id="inputname" v-model="mobile" placeholder="11位手机号" class="input-xlarge" data-rules="required" /> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label for="inputpassword" class="control-label">密码：</label> 
       <div class="controls"> 
        <input type="text" id="inputpassword" v-model="password" placeholder="输入登录密码" class="input-xlarge" /> 
       </div> 
      </div> 
      <div class="controls"> 
       <label> <input type="checkbox" name="remember-me" /><span class="type-text" style="font-size:12px;">记住登录状态</span> </label> 
       <button type="button" @click="login" class="sui-btn btn-danger btn-yes">登 录</button> 
      </div> 
      <div class="other-methods"> 
          <div id="weixin"></div>
      </div> 
     </form> 
    </div> 
   </div> 
  </div>   
</template>

<script>
import "~/assets/css/page-sj-person-loginsign.css"
import userApi from "~/api/user"
import auth from "~/utils/auth"
export default {
    head: {
        script:[
            { src: 'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js' }
        ]
    },
    mounted () {
         var obj = new WxLogin({
            self_redirect:false, //页面跳转方式  true：再二维码位置跳转，false：全局页面跳转
            id:"weixin",  //二维码出现的位置
            appid: "wx3bdb1192c22883f3", 
            scope: "snsapi_login", 
            redirect_uri: "http://note.java.itcast.cn/weixinlogin"  //手机扫描之后页面跳转的url地址  （跳转到注册web应用绑定的域名下）
        });
    },
    data () {
        return {
            user:{} ,//注册用户对象
            code:"",//验证码
            mobile:"",//登录手机号码
            password:""//登录密码
        }
    },
    methods: {
        sendSms() {
            //alert("发送验证码"+this.user.mobile)
            userApi.sendSms(this.user.mobile).then(res=> {
                this.$message({
                    message: res.data.message,
                    type: res.data.flag?'success':'error'
                });
            })
        },
        register() {
            //alert("用户注册")
            userApi.register(this.code,this.user).then(res=> {
                this.$message({
                    message: res.data.message,
                    type: res.data.flag?'success':'error'
                });
            })
        },
        login() {
           // alert("用户登录")
           userApi.login(this.mobile,this.password).then(res => {
               if(res.data.flag) {
                   //1.保存用户数据到cookie中
                   auth.setUser(res.data.data);
                   //2.跳转到首页
                   location.href="/"
               }
           })
        }
    }
}
</script>

<style>

</style>
